<div class="tabs_top_content tabs_content" id="widget_tabs_content">
	!{foreach from=$cates item=cate key=cate_key}
	<div id="!{$cate_key}_widget" class="widget_content_list_body tabs_content_body">
		!{foreach from=$cate.items item=widget key=widget_name}
		<a href="javascript:void(0)" class="widget_group" template_target="!{$widget_name}">!{$widget.name}</a>
		<div class="widget_template_thumb" target="!{$widget_name}">
			<div class="tips_icon">◆</div>
			!{foreach from=$widget.templates item=template key=template_key}
			<img src="!{res file=$template.thumb thumb='120x120'}" cate="!{$cate_key}" widget="!{$widget_name}" alt="!{$template.name}" file="!{$template.file}" title="!{$template.desc}"/>
			!{/foreach}
		</div>
		!{/foreach}
	</div>
	!{/foreach}
</div>
<ul class="bottom_tabs tabs" id="widget_tabs" target="widget_tabs_content">
	!{foreach from=$cates item=cate key=cate_key}
	<li><a href="javascript:void(0);" content="!{$cate_key}_widget">!{$cate.name}</a></li>
	!{/foreach}
</ul>
<script>
	$(function(){
		$('#widget_tabs').yu_tabs({
			//action : 'mouseover',
			onready : function(content){
				$(".widget_content_list_body a.widget_group").mouseover(function(){
					var p_left = $(this).parent().offset().left;
					$(this).parent().find('.widget_template_thumb').hide();
					var target = $(this).attr('template_target');
					var left = $(this).offset().left - p_left;;
					var width = $(this).width();
					$(this).next('[target="'+target+'"]').show().find('.tips_icon').css({left: left + width/2 - 5});
				});
				$(".widget_content_list_body .widget_template_thumb img").auto_img();
			},
			open : function(tabs_item,content){
				setTimeout(function(){
					$('#' + content + " .widget_group:eq(0)").mouseover();
				},100);
			}
		});
		
		init_widget_drop();
	});
</script>